<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取和设置元素内容</title>
</head>
<body>
    <div id="xxbj1">javaScript学习笔记1</div>
    <div id="xxbj2"><span style="color:red">javaScript学习笔记2</span></div>
    <div id="xxbj3">javaScript学习笔记3</div>
    <div id="xxbj4">javaScript学习笔记4</div>
    <script>
        document.write('获取和设置元素内容');
        document.write('<p style="color:red">方法一：innerText方法</p>');
        document.write('<p style="color:red">注：innerText方法返回的只是标签内的文本值，不包含html标签。</p>');
        var xxbj2 = document.getElementById('xxbj2');
        xxbj2.innerText = '<span style="color:red">javaScript学习笔记2</span>';
        console.log(xxbj2)
        document.write('<p style="color:red">方法二：innerHTML方法</p>');
        document.write('<p style="color:red">注：innerHTML方法返回的是标签内的所有内容，包含html标签。<br>innerHTML方法可以执行 html 标签</p>');
        xxbj2.innerHTML = '<span style="color:red">javaScript学习笔记2</span>';
    </script>
</body>
</html>